<!--  -->
<template>
  <el-dialog
    :modal="true"
    class="mydialog"
    width="500px"
    :center="true"
    :title="is_add ? '新增' : '编辑'"
    :visible="dialogformvisible_edit"
    :before-close="handleClose_edit"
    :modal-append-to-body="false"
  >
    <!-- 与添加屏幕信息界面一致 -->
    <el-form
      :model="user_info"
      label-position="left"
      ref="user_info_Form"
      :rules="rules"
    >
      <!-- 默认 user_id ==user_name -->
      <el-form-item label="id" label-width="80px" prop="user_id">
        <el-input
          :value="is_add ? user_info.user_name : user_info.user_id"
          autocomplete="off"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="用户名" label-width="80px" prop="user_name">
        <el-input
          v-model.trim="user_info.user_name"
          autocomplete="off"
          placeholder="用户名: 需英文字母"
          maxlength="40"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" label-width="80px" prop="user_pass">
        <el-input
          type="password"
          v-model.trim="user_info.user_pass"
          autocomplete="off"
          placeholder="密码"
        ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:dialogformvisible_edit', false)"
        >取 消</el-button
      >
      <el-button type="primary" @click="saveUser">保 存</el-button>
    </div>
    <div>{{ user_info.user_name }}</div>
  </el-dialog>
</template>

<script>
// import axios from "axios";
export default {
  name: "User_edit_dialog",
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "请输入组名称", trigger: "blur" },
          { min: 3, max: 50, message: "长度在3到50个字符", trigger: "blur" },
        ],

        width: [
          { required: true, message: "请输入屏幕位置", trigger: "blur" },
          //   { min: 100, max: 1000, message: "长度在3到4个字符", trigger: "blur" },
          { type: "number", message: "必须为数字值" },
        ],
        height: [
          { required: true, message: "请输入屏幕位置", trigger: "blur" },
          //   { min: 2, max: 3, message: "长度在2到3个字符", trigger: "blur" },
          { type: "number", message: "必须为数字值" },
        ],
      },

      dialogformvisible_edit_data: this.dialogformvisible_edit,
    };
  },
  props: ["dialogformvisible_edit", "is_add", "user_info"],
  methods: {
    saveUser() {
      this.$refs.user_info_Form.validate(async (valid) => {
        if (valid) {
          if (!this.user_info.user_name || !this.user_info.user_pass) {
            this.$message.error("用户名或密码为空!!!");
            return;
          }

          if (this.user_info.user_pass.length < 6) {
            this.$message.error("密码不得少于6位!!!");
            return;
          }

          if (this.is_add) {
            //axios.post add screen
            let ret = await this.$http.post("users", this.user_info);
            console.log(ret);
            let { action, result } = ret.data.data;
            console.log(action, result);
            if (result == "ok") this.$message.success("添加用户成功");
            else this.$message.error("添加用户失败");
          } else {
            //axios.put  update screen by id
            console.log(this.user_info);
            let ret = await this.$http.put(
              `users/${this.user_info.user_id}`,
              this.user_info
            );
            console.log(ret);
            let { action, result } = ret.data.data;
            console.log(action, result);
            if (result == "ok") this.$message.success("修改用户成功");
            else this.$message.error("修改用户失败");
          }

          this.$emit("update:dialogformvisible_edit", false);
        } else {
          this.$message.error("数据填写有错误");
          // return false; //?????
        }
      });
    },
    handleClose_edit(done) {
      //console.log('done',done);
      this.$confirm("确认关闭？")
        .then((_) => {
          //done(); //done 干啥的
          this.$emit("update:dialogformvisible_edit", false);
        })
        .catch((_) => {});
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(this.user_info, "++++++++++++++");
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>